<template>
    <div class="dialog_content">
        <el-form label-position="top">
            <el-form-item :label="$t('msg.设置朋友权限')">
                <div class="switch_item" @click="change(1)">
                    <div class="key">{{ $t('msg.聊天朋友圈') }}</div>
                    <img src="@/assets/image/ok.png" alt="" class="ok_icon" v-if="type == 1">
                </div>
                <div class="switch_item" @click="change(2)">
                    <div class="key">{{ $t('msg.仅聊天') }}</div>
                    <img src="@/assets/image/ok.png" alt="" class="ok_icon" v-if="type == 2">
                </div>
            </el-form-item>
            <el-form-item :label="$t('msg.朋友圈权限')" v-if="type == 1">
                <div class="switch_item">
                    <div class="key">{{ $t('msg.不让她看') }}</div>
                    <el-switch v-model="hideFromHer" :inactive-value="0" :active-value="1"
                        @change="switchChange"></el-switch>
                </div>
                <div class="switch_item">
                    <div class="key">{{ $t('msg.不看她') }}</div>
                    <el-switch v-model="dontSeeHer" :inactive-value="0" :active-value="1"
                        @change="switchChange"></el-switch>
                </div>
            </el-form-item>
        </el-form>
        <div class="footer">
            <el-button type="primary" @click="submit">{{ $t('msg.完成') }}</el-button>
            <el-button type="primary" plain @click="$emit('close')">{{ $t('msg.取消') }}</el-button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'SetAuth',
    props: {
        user_id: {
            type: [Number, String],
            default: ""
        },
        im_id: {
            type: [Number, String],
            default: ""
        }
    },
    watch: {
        im_id: {
            handler(v, n) {
                this.searchUser()
            },
            immediate: false
        }
    },
    data() {
        return {
            type: 1,
            hideFromHer: 0, // 不让她看
            dontSeeHer: 0, // 不看她
        };
    },
    created() {
        this.searchUser()
    },

    methods: {
        async searchUser() {
            let { user } = await this.$api.chatApi.searchUser({
                im_user_id: this.im_id
            });
            console.log(user)
            this.hideFromHer = user.not_see_him;
            this.dontSeeHer = user.not_see_me;
            if (this.hideFromHer && this.dontSeeHer) {
                this.type = 2
            } else {
                this.type = 1
            }
        },
        async submit() {
            await this.$api.chatApi.updateFriend({
                friend_user_id: this.user_id,
                not_see_him: this.hideFromHer,
                not_see_me: this.dontSeeHer
            });

            this.$message({
                message: this.$t('msg.保存成功'),
                type: 'success'
            });
            this.$emit('ok');
        },
        change(type) {
            this.type = type;
            if (type == 1) {
                this.hideFromHer = this.dontSeeHer = 0;
            }
            if (type == 2) {
                this.hideFromHer = this.dontSeeHer = 1;
            }
        },
        switchChange() {
            if (this.hideFromHer && this.dontSeeHer) {
                this.type = 2;
            }
        }
    }
};
</script>
<style lang="scss">
.dialog_content {
    .el-form-item {
        margin-bottom: 16px;

        .el-form-item__label {
            padding: 0 0 8px 0;
        }

        .item_input {
            .el-textarea__inner {
                height: 104px;
                font-size: 16px;
                color: #333333;
                font-weight: 500;
                background: #F5F5F5;
            }

            .el-input__inner {
                height: 52px;
                font-size: 16px;
                color: #333333;
                font-weight: 500;
                background: #F5F5F5;
            }
        }

        .switch_item {
            height: 52px;
            border-radius: 0px 0px 0px 0px;
            border-bottom: 1px solid #EDEDED;
            padding: 0 8px;
            box-sizing: border-box;
            background: #F5F5F5;

            display: flex;
            justify-content: space-between;
            align-items: center;

            .ok_icon {
                width: 24px;
                height: 24px;
            }

            &:first-child {
                border-radius: 8px 8px 0 0;
            }

            &:last-child {
                border-radius: 0 0 8px 8px;
                border-bottom: none;
            }
        }
    }
}

.footer {
    display: flex;
    justify-content: center;

    .el-button {
        width: 118px;
        height: 32px;
    }
}
</style>